<template>
	<view class="register_box">
		<!-- 背景 -->
		<view class="bg-image"></view>
		<image style="position: absolute;top: 80rpx;width: 400rpx;height: 300rpx;right: 50rpx;" src="/static/liwu.png"
			mode=""></image>
		<view style="color: #ffffff;font-size: 60rpx;font-weight: bold;position: absolute;top: 150rpx;left: 80rpx;">
			<view>千度</view>
			<view style="margin-left: 60rpx;">导航</view>
		</view>
		<!-- 内容 -->
		<view class="center">
			<fui-section marginBottom="80" style="padding: 0;" title="注册" size="60" color="#fd5531"></fui-section>
			<!-- 手机号 -->
			<fui-form ref="formRef" top="50">
				<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" placeholder="请输入手机号"
					v-model="formData.mobile">
					<template #left>
						<view class="fui-left__icon">
							<fui-icon name="mobile" :size="48" color="var(--fui-color-primary)"></fui-icon>
						</view>
					</template>
				</fui-input>

				<!-- 验证码 -->
				<fui-input backgroundColor="#F3F9FC" placeholder="请输入验证码" marginTop="30" radius="20"
					:padding="['23rpx','32rpx']" v-model="formData.code">
					<template v-slot:left>
						<view class="fui-left__icon">
							<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
						</view>
					</template>
					<fui-countdown-verify borderColor="var(--fui-color-primary)" background="var(--fui-color-primary)"
						sent="秒后获取" color="#fff" radius="40" ref="smsRef" @send="sendCode">
					</fui-countdown-verify>
				</fui-input>

				<!-- 密码 -->
				<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="30" :password="password"
					placeholder="请设置登录密码" v-model="formData.password">
					<template v-slot:left>
						<view class="fui-left__icon">
							<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
						</view>
					</template>
					<template #default>
						<view class="fui-left__icon">
							<fui-icon color="var(--fui-color-primary)" :name="password?'invisible':'visible'" :size="50"
								@click="password=!password"></fui-icon>
						</view>
					</template>
				</fui-input>
				<!-- #ifdef APP-PLUS || H5 -->
				<fui-input backgroundColor="#F3F9FC" marginTop="30" autocomplete="off" radius="30"
					placeholder="请输入邀请码(必填)" :disabled="formItem.inviteCodeDisabled" v-model="formData.inviteCode">
					<template #left>
						<view class="fui-left__icon">
							<fui-icon name="captcha" color="var(--fui-color-primary)" :size="48"></fui-icon>
						</view>
					</template>
				</fui-input>
				<!-- #endif -->

				<!-- 注册按钮 -->
				<view style="margin-top: 80rpx;">
					<fui-button text="注册" :loading="formItem.loading" :disabled="formItem.disabled"
						disabledBackground="#9BA8FD" disabledColor="#CCCCCC" bold @click="submit"
						background="linear-gradient(to right top, #ff6f49, #ff5a5e)"></fui-button>
				</view>

				<!-- 去登录 -->
				<!-- #ifdef APP-PLUS -->
				<view class="register">
					<text class="tologin" @click="toLoing">已有账号？去登录</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="register">
					<text class="download" @click="download">下载APP</text>
				</view>
				<!-- #endif -->
				<!-- <uni-id-agreements scope="register" class="agreements-box" ref="agreementsRef"></uni-id-agreements> -->
			</fui-form>

			<!-- 滑动验证 -->
			<fui-slider-captcha ref="scRef" @closeVerify="closeVerify" :src="url" :imageType="3" @success="success"
				@fail="fail" maskClosable></fui-slider-captcha>



			<!-- 图形验证码 -->
			<fui-dialog :show="formItem.needCaptcha" maskClosable title="验证码" :buttons="[{text: '确定',color: '#FF2B2B'}]"
				@click="submit" @close="close">
				<template #default>
					<fui-input autocomplete="off" style="text-align: left;" :padding="['10rpx','32rpx']" radius="20"
						placeholder="请输入验证码" v-model="formData.captcha">
						<template v-slot:left>
							<view class="fui-left__icon">
								<fui-icon name="captcha" color="var(--fui-color-primary)" :size="48"></fui-icon>
							</view>
						</template>
						<template #default>
							<uni-captcha v-if="formItem.needCaptcha" focus ref="captchaRef" scene="login-by-sms" />
						</template>
					</fui-input>
				</template>
			</fui-dialog>

		</view>
		<!-- 隐私协议 -->
		<!-- #ifdef APP-->
		<uni-id-agreements scope="register" class="agreements-box" ref="agreementsRef"></uni-id-agreements>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import { reactive, ref } from "vue"
	import { useSmsRegister } from "@/hooks/useSmsRegister"
	import { checkPssword } from "@/utils/validator.js"
	// 校验规则
	const rules = [{
			name: "mobile",
			rule: ["required", "isMobile"],
			msg: ["请输入手机号", "请输入正确的手机号"]
		},
		{
			name: "code",
			rule: ["required", 'minLength:6'],
			msg: ["请输入验证码", "请输入6位数的验证码"]
		},
		{
			name: "password",
			rule: ["required"],
			msg: ["请设置登录密码", "密码必须包含字母，密码长度必须在6-16位之间"],
			validator: [{ msg: '密码必须包含字母，密码长度必须在6-16位之间', method: checkPssword }]
		},
		// #ifdef APP
		{
			name: "inviteCode",
			rule: ["required", "isNotChinese", "minLength:6"],
			msg: ["请设置上级邀请码", "请输入正确的邀请码", "请输入正确的邀请码"]
		}
		// #endif 
	]
	const password = ref(true) //密码显示隐藏
	const formRef = ref(null) // 获取表单实例
	const agreementsRef = ref(null) // 隐私协议实例
	const captchaRef = ref(null) // 验证码实例
	const { formData, formItem, submit, toLoing, toSmsPage, url, download, close } = useSmsRegister(formRef, rules,
		agreementsRef, captchaRef)

	const smsRef = ref(null) //验证码实例
	const scRef = ref(null) //  图形验证实例 
	// 图形验证码验证成功后
	const success = () => {
		uni.showLoading({
			title: '校验成功',
			mask: true
		});
		setTimeout(async () => {
			// 关闭图形验证码
			scRef.value.closeVerify()
			// 获取短信接口
			const res = await toSmsPage()

			// 开始短信倒计时
			if (res.errCode == 0) smsRef.value && smsRef.value.success()
			uni.hideLoading()
		}, 200)
	}

	const fail = (e) => {
		//当验证失败多次时，可在这里做相应处理
		scRef.value.reset()
	}

	// 获取短信验证码
	const sendCode = () => {
		setTimeout(() => {
			//打开验证框，需要等组件初始化完成
			scRef.value && scRef.value.show()
			//发送短信
			//...
		}, 800)
	}
	// 关闭弹窗的时候重置短信验证
	const closeVerify = (val) => {
		smsRef.value && smsRef.value.reset()
	}
</script>

<style lang="scss" scoped>
	.bg-image {
		width: 100%;
		height: 550rpx;
		background: linear-gradient(to right top, #ff6f49, #ff5a5e);
		background-size: cover;
		background-position: 0 -50rpx;
	}

	.center {
		width: 100%;
		height: calc(100vh - 550rpx + 80rpx);
		background: #fff;
		box-sizing: border-box;
		border-radius: 60rpx 60rpx 0 0;
		margin-top: -80rpx;
		padding: 80rpx;
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}

	.register {
		display: flex;
		justify-content: center;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: var(--fui-color-subtitle);
		margin-top: 20rpx;
		// #ifdef H5
		margin-top: 50rpx;

		// #endif
		.download {
			font-size: 30rpx;
			color: var(--fui-color-primary);
		}
	}

	.agreements-box {
		// #ifdef APP
		position: fixed;
		bottom: 80rpx;
		z-index: 99;
		// #endif
		// #ifdef H5
		margin-top: 50rpx;
		// #endif
	}
</style>